<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-20 14:31:56
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-09-13 16:40:27
 * @FilePath: /nhw/src/views/Message/index.vue
-->
<template>
  <Layout
    class="message-container"
    title="消息"
    rightText="全部已读"
    border
    :leftArrow="false"
    @click-right="onClickRight"
  >
    <section class="message-list-wrap">
      <SwipeCell v-for="value in 3" :key="value">
        <div class="message-item">
          <div
            class="avatar"
            :class="'state' + Math.floor(Math.random() * 3)"
          ></div>
          <div class="content-wrap">
            <p class="title">
              <span class="from">随手拍</span>
              <span class="delivery-time">2021-08-17 12：00 </span>
            </p>
            <p class="content" :class="{ newMes: Math.random() > 0.5 }">
              【XX】用户发起随手拍，请尽快处理！
            </p>
          </div>
        </div>
        <template #right>
          <Button square text="已读" type="danger" class="delete-button" />
        </template>
      </SwipeCell>
    </section>
  </Layout>
</template>

<script>
import Layout from "components/Layout";
import { SwipeCell, Button } from "vant";

export default {
  name: "Message",

  components: { Layout, SwipeCell, Button },

  directives: {},

  data() {
    return {
      list: [],
    };
  },

  mounted() {},

  methods: {
    onClickRight(e) {
      console.log(e);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("~style/var.less");
.message-list-wrap {
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  .message-item {
    padding: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    .avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      background-size: 56%, 100%;
      background-repeat: no-repeat;
      background-position: center;
      &.state0 {
        background-image: url("~assets/img/xx0@2x.png"),
          linear-gradient(135deg, #ff656d 0%, #ffb871 100%);
      }
      &.state1 {
        background-image: url("~assets/img/xx1@2x.png"),
          linear-gradient(135deg, #f857a4 0%, #fe5860 100%);
      }
      &.state2 {
        background-image: url("~assets/img/xx2@2x.png"),
          linear-gradient(135deg, #3f8bff 0%, #b07fff 100%);
      }
    }
    .content-wrap {
      margin-left: 20px;
      flex: auto;
      .title {
        display: flex;
        justify-content: space-between;

        .from {
          color: @words;
          font-size: 30px;
          font-weight: bold;
        }

        .delivery-time {
          color: @lightWords;
          font-size: 24px;
        }
      }

      .content {
        color: @gray;
        font-size: 26px;
        position: relative;
        &.newMes::after {
          position: absolute;
          top: 4px;
          right: 4px;
          content: "";
          display: block;
          width: 16px;
          height: 16px;
          background: #fd586b;
          border-radius: 50%;
        }
      }
    }
  }
}
.van-button {
  height: 100%;
}
</style>